<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>innerHTML</title>
    <style>
        .two{
            width: 100px;
            height: 100px;
            border: 1px solid green;
        }
        .three{
            width: 200px;
            height: 200px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>
    <div id="one">
        div
    </div>
    <div class="two">
        div2
    </div>
</body>
<script>
    /**
     * 使用innerHTML进行添加html元素对象*/
    var one = document.getElementById("one");
    var two = document.getElementsByClassName("two")[0];//获取class为two的标签
    alert(one.innerHTML);//打印div
    one.innerHTML+="<input type='text'>";//在原来的基础上添加一个文本框
    /**使用innerHTML来控制元素的样式*/
    //1.直接通过修改style的属性进行修改
    one.onclick=function () {
        one.style.border="1px solid red";

    }
    //2.通过修改的类名来进行修改元素的css样式，需要提前设定好修改的样式
    two.onclick=function () {
        two.className="three";//注意：修改的标签的class的属性并非是id的样式

    }
</script>
</html>